import React, { useState } from 'react';
import { Button, Form, Input, InputNumber, Radio, message } from 'antd';

import Upload from '@/components/upload'
import './style.scss'
import { addUserRequest } from '@/apis/user';
import { passwordRule, phoneRule, usernameRule } from '@/utils/formRules';
import { layout } from '@/utils/contants';
import { storeAll } from '@/store';

const AddUserManager: React.FC = () => {
	const [avater, setAvater] = useState<string>('');
	const [form] = Form.useForm()
	const { usersStore: { getUsers } } = storeAll

	const getImgUrl = (url: string) => {
		setAvater(url)
	}

	const onFinish = (values: any) => {
		values.avater = avater
		addUserRequest(values).then(re => {
			message.success('添加用户成功')
			form.resetFields()
			getUsers()
		})
	};

	return <div className="addusermanager">
		<Form
			{...layout}
			name="nest-messages"
			onFinish={onFinish}
			form={form}
		>
			<Form.Item name={['username']} label="用户名" rules={[usernameRule]}>
				<Input />
			</Form.Item>
			<Form.Item name={['password']} label="密码" rules={[passwordRule]}>
				<Input.Password />
			</Form.Item>
			<Form.Item name={['name']} label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
				<Input />
			</Form.Item>
			<Form.Item name={['phone']} label="电话" rules={[phoneRule]}>
				<Input />
			</Form.Item>
			<Form.Item name={['sex']} label="性别" rules={[{ required: true, message: '请选择性别' }]}>
				<Radio.Group>
					<Radio value={0}>女</Radio>
					<Radio value={1}>男</Radio>
				</Radio.Group>
			</Form.Item>
			<Form.Item name={['age']} label="年龄" rules={[{ required: true, message: '请输入年龄' }]}>
				<InputNumber min={18} max={60} />
			</Form.Item>
			<Form.Item label="头像">
				<Upload getImgUrl={getImgUrl}></Upload>
			</Form.Item>
			<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
				<Button type="primary" htmlType="submit">
					添加
				</Button>
			</Form.Item>
		</Form>
	</div>
}

export default AddUserManager;